<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
  <script src="../init.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>AniSprite</h2>

<p></p>

<p><a href="http://processing.org/learning/topics/anisprite.html"><b>Original Processing.org Example:</b> AniSprite</a><br>
<script type="application/processing">
// Class for animating a sequence of GIFs

class AniSprite {
  PImage[] ani;
  int frame;
  int numFrames;
  
  AniSprite(String imageName, int frameCount) {
    numFrames = frameCount;
    ani = new PImage[numFrames];
    loadImages(imageName);
  }

  void loadImages(String name) {
    for(int i=0; i<numFrames; i++) {
      String imageName = name + ((i < 10) ? "0" : "") + i + ".gif";
      ani[i] = loadImage(imageName);
    }
  }

  void display(float xpos, float ypos) {
    frame = (frame+1)%numFrames;
    image(ani[frame], xpos, ypos);
  }
  
  int getWidth() {
    return ani[0].width;
  }
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"><img src='data/PT_Shifty_0000.gif' id='PT_Shifty_0000.gif'/><img src='data/PT_Shifty_0001.gif' id='PT_Shifty_0001.gif'/><img src='data/PT_Shifty_0002.gif' id='PT_Shifty_0002.gif'/><img src='data/PT_Shifty_0003.gif' id='PT_Shifty_0003.gif'/><img src='data/PT_Shifty_0004.gif' id='PT_Shifty_0004.gif'/><img src='data/PT_Shifty_0005.gif' id='PT_Shifty_0005.gif'/><img src='data/PT_Shifty_0006.gif' id='PT_Shifty_0006.gif'/><img src='data/PT_Shifty_0007.gif' id='PT_Shifty_0007.gif'/><img src='data/PT_Shifty_0008.gif' id='PT_Shifty_0008.gif'/><img src='data/PT_Shifty_0009.gif' id='PT_Shifty_0009.gif'/><img src='data/PT_Shifty_0010.gif' id='PT_Shifty_0010.gif'/><img src='data/PT_Shifty_0011.gif' id='PT_Shifty_0011.gif'/><img src='data/PT_Shifty_0012.gif' id='PT_Shifty_0012.gif'/><img src='data/PT_Shifty_0013.gif' id='PT_Shifty_0013.gif'/><img src='data/PT_Shifty_0014.gif' id='PT_Shifty_0014.gif'/><img src='data/PT_Shifty_0015.gif' id='PT_Shifty_0015.gif'/><img src='data/PT_Shifty_0016.gif' id='PT_Shifty_0016.gif'/><img src='data/PT_Shifty_0017.gif' id='PT_Shifty_0017.gif'/><img src='data/PT_Shifty_0018.gif' id='PT_Shifty_0018.gif'/><img src='data/PT_Shifty_0019.gif' id='PT_Shifty_0019.gif'/><img src='data/PT_Shifty_0020.gif' id='PT_Shifty_0020.gif'/><img src='data/PT_Shifty_0021.gif' id='PT_Shifty_0021.gif'/><img src='data/PT_Shifty_0022.gif' id='PT_Shifty_0022.gif'/><img src='data/PT_Shifty_0023.gif' id='PT_Shifty_0023.gif'/><img src='data/PT_Shifty_0024.gif' id='PT_Shifty_0024.gif'/><img src='data/PT_Shifty_0025.gif' id='PT_Shifty_0025.gif'/><img src='data/PT_Shifty_0026.gif' id='PT_Shifty_0026.gif'/><img src='data/PT_Shifty_0027.gif' id='PT_Shifty_0027.gif'/><img src='data/PT_Shifty_0028.gif' id='PT_Shifty_0028.gif'/><img src='data/PT_Shifty_0029.gif' id='PT_Shifty_0029.gif'/><img src='data/PT_Shifty_0030.gif' id='PT_Shifty_0030.gif'/><img src='data/PT_Shifty_0031.gif' id='PT_Shifty_0031.gif'/><img src='data/PT_Shifty_0032.gif' id='PT_Shifty_0032.gif'/><img src='data/PT_Shifty_0033.gif' id='PT_Shifty_0033.gif'/><img src='data/PT_Shifty_0034.gif' id='PT_Shifty_0034.gif'/><img src='data/PT_Shifty_0035.gif' id='PT_Shifty_0035.gif'/><img src='data/PT_Shifty_0036.gif' id='PT_Shifty_0036.gif'/><img src='data/PT_Shifty_0037.gif' id='PT_Shifty_0037.gif'/><img src='data/PT_Teddy_0000.gif' id='PT_Teddy_0000.gif'/><img src='data/PT_Teddy_0001.gif' id='PT_Teddy_0001.gif'/><img src='data/PT_Teddy_0002.gif' id='PT_Teddy_0002.gif'/><img src='data/PT_Teddy_0003.gif' id='PT_Teddy_0003.gif'/><img src='data/PT_Teddy_0004.gif' id='PT_Teddy_0004.gif'/><img src='data/PT_Teddy_0005.gif' id='PT_Teddy_0005.gif'/><img src='data/PT_Teddy_0006.gif' id='PT_Teddy_0006.gif'/><img src='data/PT_Teddy_0007.gif' id='PT_Teddy_0007.gif'/><img src='data/PT_Teddy_0008.gif' id='PT_Teddy_0008.gif'/><img src='data/PT_Teddy_0009.gif' id='PT_Teddy_0009.gif'/><img src='data/PT_Teddy_0010.gif' id='PT_Teddy_0010.gif'/><img src='data/PT_Teddy_0011.gif' id='PT_Teddy_0011.gif'/><img src='data/PT_Teddy_0012.gif' id='PT_Teddy_0012.gif'/><img src='data/PT_Teddy_0013.gif' id='PT_Teddy_0013.gif'/><img src='data/PT_Teddy_0014.gif' id='PT_Teddy_0014.gif'/><img src='data/PT_Teddy_0015.gif' id='PT_Teddy_0015.gif'/><img src='data/PT_Teddy_0016.gif' id='PT_Teddy_0016.gif'/><img src='data/PT_Teddy_0017.gif' id='PT_Teddy_0017.gif'/><img src='data/PT_Teddy_0018.gif' id='PT_Teddy_0018.gif'/><img src='data/PT_Teddy_0019.gif' id='PT_Teddy_0019.gif'/><img src='data/PT_Teddy_0020.gif' id='PT_Teddy_0020.gif'/><img src='data/PT_Teddy_0021.gif' id='PT_Teddy_0021.gif'/><img src='data/PT_Teddy_0022.gif' id='PT_Teddy_0022.gif'/><img src='data/PT_Teddy_0023.gif' id='PT_Teddy_0023.gif'/><img src='data/PT_Teddy_0024.gif' id='PT_Teddy_0024.gif'/><img src='data/PT_Teddy_0025.gif' id='PT_Teddy_0025.gif'/><img src='data/PT_Teddy_0026.gif' id='PT_Teddy_0026.gif'/><img src='data/PT_Teddy_0027.gif' id='PT_Teddy_0027.gif'/><img src='data/PT_Teddy_0028.gif' id='PT_Teddy_0028.gif'/><img src='data/PT_Teddy_0029.gif' id='PT_Teddy_0029.gif'/><img src='data/PT_Teddy_0030.gif' id='PT_Teddy_0030.gif'/><img src='data/PT_Teddy_0031.gif' id='PT_Teddy_0031.gif'/><img src='data/PT_Teddy_0032.gif' id='PT_Teddy_0032.gif'/><img src='data/PT_Teddy_0033.gif' id='PT_Teddy_0033.gif'/><img src='data/PT_Teddy_0034.gif' id='PT_Teddy_0034.gif'/><img src='data/PT_Teddy_0035.gif' id='PT_Teddy_0035.gif'/><img src='data/PT_Teddy_0036.gif' id='PT_Teddy_0036.gif'/><img src='data/PT_Teddy_0037.gif' id='PT_Teddy_0037.gif'/><img src='data/PT_Teddy_0038.gif' id='PT_Teddy_0038.gif'/><img src='data/PT_Teddy_0039.gif' id='PT_Teddy_0039.gif'/><img src='data/PT_Teddy_0040.gif' id='PT_Teddy_0040.gif'/><img src='data/PT_Teddy_0041.gif' id='PT_Teddy_0041.gif'/><img src='data/PT_Teddy_0042.gif' id='PT_Teddy_0042.gif'/><img src='data/PT_Teddy_0043.gif' id='PT_Teddy_0043.gif'/><img src='data/PT_Teddy_0044.gif' id='PT_Teddy_0044.gif'/><img src='data/PT_Teddy_0045.gif' id='PT_Teddy_0045.gif'/><img src='data/PT_Teddy_0046.gif' id='PT_Teddy_0046.gif'/><img src='data/PT_Teddy_0047.gif' id='PT_Teddy_0047.gif'/><img src='data/PT_Teddy_0048.gif' id='PT_Teddy_0048.gif'/><img src='data/PT_Teddy_0049.gif' id='PT_Teddy_0049.gif'/><img src='data/PT_Teddy_0050.gif' id='PT_Teddy_0050.gif'/><img src='data/PT_Teddy_0051.gif' id='PT_Teddy_0051.gif'/><img src='data/PT_Teddy_0052.gif' id='PT_Teddy_0052.gif'/><img src='data/PT_Teddy_0053.gif' id='PT_Teddy_0053.gif'/><img src='data/PT_Teddy_0054.gif' id='PT_Teddy_0054.gif'/><img src='data/PT_Teddy_0055.gif' id='PT_Teddy_0055.gif'/><img src='data/PT_Teddy_0056.gif' id='PT_Teddy_0056.gif'/><img src='data/PT_Teddy_0057.gif' id='PT_Teddy_0057.gif'/><img src='data/PT_Teddy_0058.gif' id='PT_Teddy_0058.gif'/><img src='data/PT_Teddy_0059.gif' id='PT_Teddy_0059.gif'/></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
// Class for animating a sequence of GIFs

class AniSprite {
  PImage[] ani;
  int frame;
  int numFrames;
  
  AniSprite(String imageName, int frameCount) {
    numFrames = frameCount;
    ani = new PImage[numFrames];
    loadImages(imageName);
  }

  void loadImages(String name) {
    for(int i=0; i&lt;numFrames; i++) {
      String imageName = name + ((i &lt; 10) ? "0" : "") + i + ".gif";
      ani[i] = loadImage(imageName);
    }
  }

  void display(float xpos, float ypos) {
    frame = (frame+1)%numFrames;
    image(ani[frame], xpos, ypos);
  }
  
  int getWidth() {
    return ani[0].width;
  }
}</pre>
</body>
</html>
